<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百炼 API 配置管理</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .config-container {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .config-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .config-header h2 {
            margin: 0;
        }

        .config-actions {
            display: flex;
            gap: 10px;
        }

        .config-form {
            margin-bottom: 20px;
        }

        .config-item {
            margin-bottom: 15px;
        }

        .config-item label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .config-item input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: inherit;
            font-size: 14px;
        }

        .checkbox-group {
            margin-top: 5px;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            font-weight: normal;
            cursor: pointer;
        }

        .checkbox-label input[type="checkbox"] {
            width: auto;
            margin-right: 8px;
        }

        .config-item .hint {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }

        .config-status {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-top: 20px;
        }

        .config-status h3 {
            margin-top: 0;
            margin-bottom: 10px;
        }

        .config-status pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
            margin: 0;
        }

        .nav-links {
            margin-bottom: 20px;
        }

        .nav-links a {
            color: #3498db;
            text-decoration: none;
            margin-right: 15px;
        }

        .nav-links a:hover {
            text-decoration: underline;
        }

        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .status-indicator.success {
            background-color: #2ecc71;
        }

        .status-indicator.error {
            background-color: #e74c3c;
        }

        .status-indicator.warning {
            background-color: #f1c40f;
        }

        .status-message {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }

        .status-message.success {
            background-color: #d5f5e3;
            color: #27ae60;
        }

        .status-message.error {
            background-color: #fadbd8;
            color: #c0392b;
        }

        .status-message.warning {
            background-color: #fef9e7;
            color: #f39c12;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>百炼 API 配置管理</h1>
        </header>

        <div class="nav-links">
            <a href="/">返回测试页面</a>
        </div>

        <div class="config-container">
            <div class="config-header">
                <h2>API 配置</h2>
                <div class="config-actions">
                    <button id="test-config" class="btn-secondary">测试配置</button>
                    <button id="save-config" class="btn-primary">保存配置</button>
                </div>
            </div>

            <div class="config-form">
                <div class="config-item">
                    <label>DashScope API Key</label>
                    <div class="hint">请在环境变量中设置 DASHSCOPE_API_KEY，而不是在配置文件中存储</div>
                </div>

                <div class="config-item">
                    <label for="access-key-secret">Access Key Secret</label>
                    <input type="password" id="access-key-secret" placeholder="输入阿里云 Access Key Secret">
                    <div class="hint">阿里云账号的访问密钥密钥</div>
                </div>

                <div class="config-item">
                    <label for="api-endpoint">API 端点</label>
                    <input type="text" id="api-endpoint" placeholder="输入百炼 API 端点">
                    <div class="hint">百炼 API 的服务端点，默认为 https://bailian.aliyuncs.com</div>
                </div>

                <div class="config-item">
                    <label for="model-id">模型 ID</label>
                    <input type="text" id="model-id" placeholder="输入百炼模型 ID">
                    <div class="hint">要使用的百炼模型 ID，如 qwen-max、qwen-vl-max 等</div>
                </div>

                <div class="config-item">
                    <label>客户端类型</label>
                    <div class="checkbox-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="use-openai-client" checked>
                            使用 OpenAI 客户端
                        </label>
                        <div class="hint">使用 OpenAI 库与阿里云百炼进行通信</div>
                    </div>
                </div>

                <div class="config-item">
                    <label>服务器选择</label>
                    <div class="checkbox-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="use-official-api">
                            使用官方 DashScope 兼容模式 API
                        </label>
                        <div class="hint">如果选中，将使用阿里云官方的 DashScope 兼容模式 API，而不是本地服务器</div>
                    </div>
                </div>
            </div>

            <div id="config-status" class="config-status" style="display: none;">
                <h3>配置状态</h3>
                <div id="status-message" class="status-message"></div>
                <pre id="status-details"></pre>
            </div>
        </div>
    </div>

    <footer>
        <p>百炼 API 服务器 &copy; 2023</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 元素引用
            const accessKeySecretInput = document.getElementById('access-key-secret');
            const apiEndpointInput = document.getElementById('api-endpoint');
            const modelIdInput = document.getElementById('model-id');
            const useOpenaiClientCheckbox = document.getElementById('use-openai-client');
            const useOfficialApiCheckbox = document.getElementById('use-official-api');
            const saveConfigButton = document.getElementById('save-config');
            const testConfigButton = document.getElementById('test-config');
            const configStatus = document.getElementById('config-status');
            const statusMessage = document.getElementById('status-message');
            const statusDetails = document.getElementById('status-details');

            // 加载当前配置
            loadConfig();

            // 保存配置按钮点击事件
            saveConfigButton.addEventListener('click', saveConfig);

            // 测试配置按钮点击事件
            testConfigButton.addEventListener('click', testConfig);

            // 加载配置
            async function loadConfig() {
                try {
                    const response = await fetch('/api/config');
                    const data = await response.json();

                    if (data.success) {
                        const config = data.config;

                        // 填充表单

                        if (config.alibaba_cloud_access_key_secret_masked) {
                            accessKeySecretInput.placeholder = config.alibaba_cloud_access_key_secret_masked;
                        }

                        if (config.bailian_api_endpoint) {
                            apiEndpointInput.value = config.bailian_api_endpoint;
                        }

                        if (config.bailian_model_id) {
                            modelIdInput.value = config.bailian_model_id;
                        }

                        // 设置新的配置项
                        if (config.use_openai_client !== undefined) {
                            useOpenaiClientCheckbox.checked = config.use_openai_client;
                        }

                        if (config.use_official_api !== undefined) {
                            useOfficialApiCheckbox.checked = config.use_official_api;
                        }

                        // 显示上次更新时间
                        if (config.last_updated) {
                            const lastUpdated = new Date(config.last_updated);
                            showStatus('success', `配置已加载，上次更新时间：${lastUpdated.toLocaleString()}`);
                        }
                    } else {
                        showStatus('error', '加载配置失败', data.error);
                    }
                } catch (error) {
                    showStatus('error', '加载配置失败', error.message);
                }
            }

            // 保存配置
            async function saveConfig() {
                try {
                    // 准备配置数据
                    const configData = {};



                    if (accessKeySecretInput.value) {
                        configData.alibaba_cloud_access_key_secret = accessKeySecretInput.value;
                    }

                    if (apiEndpointInput.value) {
                        configData.bailian_api_endpoint = apiEndpointInput.value;
                    }

                    if (modelIdInput.value) {
                        configData.bailian_model_id = modelIdInput.value;
                    }

                    // 添加新的配置项
                    configData.use_openai_client = useOpenaiClientCheckbox.checked;
                    configData.use_official_api = useOfficialApiCheckbox.checked;

                    // 发送请求
                    const response = await fetch('/api/config', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(configData)
                    });

                    const data = await response.json();

                    if (data.success) {
                        showStatus('success', '配置已保存', JSON.stringify(data.config, null, 2));

                        // 清空密钥输入框
                        accessKeySecretInput.value = '';

                        // 更新占位符

                        if (data.config.alibaba_cloud_access_key_secret_masked) {
                            accessKeySecretInput.placeholder = data.config.alibaba_cloud_access_key_secret_masked;
                        }
                    } else {
                        showStatus('error', '保存配置失败', data.error);
                    }
                } catch (error) {
                    showStatus('error', '保存配置失败', error.message);
                }
            }

            // 测试配置
            async function testConfig() {
                try {
                    showStatus('warning', '正在测试配置...');

                    const response = await fetch('/api/config/test', {
                        method: 'POST'
                    });

                    const data = await response.json();

                    if (data.success) {
                        showStatus('success', 'API 连接测试成功', JSON.stringify(data.response, null, 2));
                    } else {
                        showStatus('error', 'API 连接测试失败', data.error);
                    }
                } catch (error) {
                    showStatus('error', 'API 连接测试失败', error.message);
                }
            }

            // 显示状态信息
            function showStatus(type, message, details) {
                configStatus.style.display = 'block';
                statusMessage.className = 'status-message ' + type;
                statusMessage.innerHTML = `<span class="status-indicator ${type}"></span> ${message}`;

                if (details) {
                    statusDetails.textContent = details;
                    statusDetails.style.display = 'block';
                } else {
                    statusDetails.style.display = 'none';
                }
            }
        });
    </script>
</body>
</html>
